<template>
	<uni-popup ref="popup" type="center" @change="PopupChange">
		<view class="p-area">
			<view class="p-title u-p-24 u-border-bottom u-rela u-text-center">
				<view @click="close" class="u-p-24" style="position: absolute;top: 0;left: 0;">
					<image src="/static/wallet/popup-icon-close.png" style="width: 32rpx;height: 32rpx;"></image>
				</view>
				<text class="u-font-30">请输入验证码</text>
			</view>

			<view v-if="paymentAmount" class="u-text-center u-m-32"><text class="u-font-30 font-bold">￥</text><text
					class="font-bold" style="font-size: 64rpx;">{{paymentAmount}}</text>
			</view>

			<view v-if="selectedPayment" class="u-flex u-m-42 u-tips-color">
				<text class="u-flex-1">支付方式</text>
				<image src="/static/wallet/icon-card.png" style="width: 40rpx;height: 40rpx;margin-right: 16rpx">
				</image>
				<text>{{selectedPayment.title}}</text>
			</view>

			<view class="" style="margin: 48rpx 24rpx 56rpx 24rpx;">
				<u-message-input v-if="focus" @change="change" :value="value" @finish="finish" :maxlength="6" mode="box"
					:focus="focus" :dot-fill="false" inactive-color="#333">
				</u-message-input>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			selectedPayment: {
				type: Object,
				default () { return {} }
			},
			paymentAmount: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				value: '',
				focus: false
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			finish(value) {
				this.$emit('captchaFinish', value)
			},
			change(value) {
				this.value = value
			},
			PopupChange(e) {
				if (!e.show) {
					this.focus = false
				} else {
					this.focus = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p-area {
		width: 660rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.font-bold {
		font-weight: 600;
	}

	/deep/.u-char-item.u-box {
		border-color: transparent;
		background: #EAEAEA;
	}
</style>
